<template>
  <div class="details">
      <div class="details_name">
          <div class="details_name_text">
              <a-tooltip>
                  <template #title>{{DetailsObj.projectName}}</template>
                  {{DetailsObj.projectName}}
              </a-tooltip>
          </div>
      </div>
      <div class="details-content">
          <div class="details_table">
              <div class="details_table_item">
                  <div class="details_table_label">
                      所属基地 ：
                  </div>
                  <div class="details_name_text">
                      {{DetailsObj.baseId_dictText}}
                  </div>
              </div>
              <div class="details_table_item">
                  <div class="details_table_label">
                      项目分类 ：
                  </div>
                  <div class="details_name_text">
                      {{DetailsObj.projectType_dictText}}
                  </div>
              </div>
              <div class="details_table_item">
                  <div class="details_table_label">
                      项目小类 ：
                  </div>
                  <div class="details_name_text">
                      <a-tooltip>
                          <template #title>{{DetailsObj.secondaryType_dictText}}</template>
                          {{DetailsObj.secondaryType_dictText}}
                      </a-tooltip>
                  </div>
              </div>
              <div class="details_table_item">
                  <div class="details_table_label">
                      联系人电话 ：
                  </div>
                  <div class="details_name_text">
                      {{DetailsObj.contactsPhone}}
                  </div>
              </div>
              <div class="details_table_item">
                  <div class="details_table_item12">
                      <div class="details_table_label">
                          专项资金 ：
                      </div>
                      <div class="details_name_text">
                          {{DetailsObj. specialFunds }}
                      </div>
                  </div>
                  <div class="details_table_item12">
                      <div class="details_table_label">
                          单位配套资金 ：
                      </div>
                      <div class="details_name_text">
                          {{ DetailsObj.unitMatchingFunds }}
                      </div>
                  </div>
              </div>
              <div class="details_table_item">
                  <div class="details_table_item12">
                      <div class="details_table_label">
                          项目经费 ：
                      </div>
                      <div class="details_name_text">
                          {{ DetailsObj.money }}
                      </div>
                  </div>
                  <div class="details_table_item12">
                      <div class="details_table_label">
                          年度 ：
                      </div>
                      <div class="details_name_text">
                          {{ DetailsObj.year }}
                      </div>
                  </div>
              </div>
          </div>
          <div class="view_box" v-if="DetailsObj">
              <RightDetailsItemCom DataLabel="项目概况及内容" :DataText="DetailsObj.projectOverviewContent" v-if="DetailsObj.projectOverviewContent" @viewrDetails="viewrDetails"></RightDetailsItemCom>
              <RightDetailsItemCom DataLabel="项目必要性依据" :DataText="DetailsObj.projectNecessityBasis" v-if="DetailsObj.projectNecessityBasis" @viewrDetails="viewrDetails"></RightDetailsItemCom>
              <RightDetailsItemCom DataLabel="设备名称规格型号" :DataText="DetailsObj.specificationsModels" v-if="DetailsObj.specificationsModels" @viewrDetails="viewrDetails"></RightDetailsItemCom>
              <RightDetailsItemCom DataLabel="采购数量" :DataText="DetailsObj.purchaseAmount" v-if="DetailsObj.purchaseAmount" @viewrDetails="viewrDetails"></RightDetailsItemCom>
              <RightDetailsItemCom DataLabel="实施计划" :DataText="DetailsObj.implementationPlan" v-if="DetailsObj.implementationPlan" @viewrDetails="viewrDetails"></RightDetailsItemCom>
              <RightDetailsItemCom DataLabel="备注" :DataText="DetailsObj.remark" v-if="DetailsObj.remark" @viewrDetails="viewrDetails"></RightDetailsItemCom>
          </div>
          <div class="files-tree">
              <div class="view_box_content">
                  <div class="header">
                      相关附件
                  </div>
                  <div class="content">
                      <TreeCom :TreeData="TreeData"></TreeCom>
                  </div>
              </div>
          </div>

      </div>
<!--      <viewDetailsItemModal></viewDetailsItemModal>-->
  </div>
</template>

<script>
// import viewDetailsItemModal from './viewDetailsItemModal.vue'
import TreeCom from './TreeCom.vue'
//右侧显示项目详情
import {reactive, toRefs} from "vue";
import RightDetailsItemCom from './RightDetailsItemCom.vue'
export default {
    name: "RightDetails",
    components:{
        RightDetailsItemCom,
        TreeCom
    },
    setup(props, context) {
       let  RightDetailsObj = reactive({
           DetailsObj: {},
           TreeData: [],
           init: (item) => {
               RightDetailsObj.DetailsObj = item
               let filesObj = {
                   'annualStatement': '上年度项目实施情况说明',
                   'inquiryStatus': '询价情况',
                   'approximateEstimates': '概算表',
                   'projectApplication': '立项申请资料',
                   'declarationForm': '申报表资料',
                   'summarySheet': '汇总表资料',
                   'feasibilityReport': '可行性报告资料',
                   'preliminaryOpinion': '单位初审意见',
                   'attachment': '其他附件',
                   'minutesMeeting': '会议纪要',
                   'allocationCommitment': '配置资金承诺',
               }
               let TreeData = []
               for (const key in filesObj) {
                   if (filesObj.hasOwnProperty(key)) {
                       const value = filesObj[key];
                       TreeData.push({title:value,value:item[key]})
                   }
               }
               RightDetailsObj.TreeData = TreeData.map(Mitem=>{
                   return {
                       title: Mitem.title,
                       children:Mitem.value.split(',') || Mitem.value,
                       isLeaf:false
                   }
               })

           },
           truncateString:(str)=>{
               if (str && str.length > 55) {
                   return str.slice(0, 55) + '...';
               } else {
                   return str;
               }
           },
           viewrDetails: (DataLabel,DataText) => {
               let itemInfo = {DataLabel,DataText}
               context.emit('openItemModal',itemInfo)
           },
           onSelect(selectedKeys, info) {

           }
       })
      return {
        ...toRefs(RightDetailsObj)
      }
    }
}
</script>

<style scoped lang="less">
::-webkit-scrollbar {
  width: 4px; /* 设置滚动条宽度 */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(64, 124, 214, 1); /* 设置滚动条滑块颜色 */
  border-radius: 4px; /* 设置滚动条滑块圆角 */
}
  .details{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    .details_name{
      padding-right:10px;
      height: 46px;
      font-size: 20px;
      line-height: 46px;
      padding-left: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      font-style: italic;
      color: #F6F9FE;
      text-shadow: 0px 2px 8px rgba(5,28,55,0.42);
      background-image: url("/src/assets/details_name.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-color: linear-gradient(0deg, rgba(14,197,236,0.36) 0%, rgba(49,190,255,0.36) 0%, rgba(239,252,254,0.36) 58.7646484375%);
      .details_name_text{
        max-width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .details-content{
      padding-right: 10px;
      overflow-y: scroll;
      flex:1;
      flex-shrink: 0;
    }
    .details_table{
      margin-top: 20px;
      font-family: OPPOSans;
      .details_table_item{
        height: 48px;
        border-bottom: 1px solid #2658a0;
        padding:  0 20px;
        display: flex;
        align-items: center;
        .details_table_item12{
          display: flex;
          align-items: center;
          flex:1;
          flex-shrink: 0;
        }
        &:nth-child(odd){
          background: rgba(18, 111, 217, 0.23);
        }
        &:nth-child(even){
          background: rgba(41, 137, 255, 0.14);
        }
        &:first-child{
          background: rgba(18, 111, 217,0.61);
        }
      }
      .details_table_label{
        color: #CAD6EB;
        margin-right: 10px;
      }
      .details_name_text{
        color: #FFFFFF;
        flex: 1;
        flex-shrink: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .view_box{
        margin-top: 10px;

        padding: 4px;
        .remark{
            .content{
                &:empty::before {
                    content: "暂无备注信息~";
                }
            }
        }


    }
    .files-tree{
        margin-top:10px;
        .view_box_content{
            background-color: rgba(4, 25, 56, 0.5);
            border: 1px solid #2989FF;
            padding: 10px;
            font-size: 16px;
            margin-top: 10px;
            .header{
                background: rgba(18, 111, 217, 0.61);
                color: #FFFFFF;
                height: 30px;
                line-height: 30px;
                text-align: center;
            }
            .content{
                margin-top: 10px;
                color: #CAD6EB;
                position: relative;
                padding: 10px;
                span{
                    margin-right: 10px;
                    color: #30c6c5;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    cursor:pointer;
                }
            }
        }
    }

  }
</style>
